<template>
  <div id="app">
    <div style="position: fixed; top: 0; left: 0; width: 100%; background-color: white; z-index: 999;">
      <van-icon @click="goBack()" name="arrow-left" style="font-size: 30px;"/>
      <div style="text-align: center"><b>{{ driver.driverName }}</b></div>
    </div>
      <div>
        <van-list style="padding-bottom:70px; padding-top: 30px;" ref="listRef">
          <van-cell v-for="item in messageList" :key="item.id" >
            <div v-if="item.fromUserId.includes('driver')" style="float: left; display: flex; align-items: center;">
              <div class="driver-Img" style="margin-right: 10px; float: left; ">
                <van-image round width="100px" height="100px" :src="item.fromUserPicture" />
              </div>
              <div class="messageLeft">
                {{ item.message }}
              </div>
            </div>
            <div v-if="item.fromUserId.includes('passenger')" style="float: right;  align-items: center;">
              <div class="driver-Img" style="margin-right: 10px; float: right; ">
                <van-image round width="100px" height="100px" :src="item.fromUserPicture" />
              </div>
              <div class="messageRight" style="float: right; margin-top: 50px">
                {{ item.message }}
              </div>
            </div>
          </van-cell>
        </van-list>
      </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >
      <div class="text" @click="closeShow('我会晚几分钟到麻烦司机等我一下,谢谢')"><span>我会晚几分钟到麻烦司机等我一下,谢谢</span></div>
      <div class="text" @click="closeShow('出发点定位准确')"><span>出发点定位准确</span></div>
      <div class="text" @click="closeShow('我已到达出发点,随时可以出发')"><span>我已到达出发点,随时可以出发</span></div>
      <van-button @click="show=false" style="width: 100%">取消</van-button>
    </van-popup>
    <div class="fixed-bottom-box">
      <van-button round type="info" style="width: 20%" @click="show=true">常用语</van-button>
      <van-field v-model="message" placeholder="请输入内容" style="width: 60%"  />
      <van-button type="primary" style="width: 20%;" @click="sendMessage">发送</van-button>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import {Toast} from "vant";

  export default {
    name: "chatMessage",
    data() {
      return {
        show:false,
        driverId:null,
        websocket:null,
        messageList:[],
        driver:{},
        passenger:{},
        chatMessage:{
          fromUserId:null,
          toUserId:null,
          message:null,
          time:null,
          fromUserPicture:null,
          toUserPicture:null,
        },
        userPassenger:{
          id:1,
        },
        userId:null,
        message:"",
        sendWsIntervalId:null,
        driverById:{
          id:null,
        }
      };
    },
    mounted() {
      let self=this;
      let socketUrl="http://sj3m7w.natappfree.cc/websocket/message/"+this.chatMessage.fromUserId;
      this.websocket = new WebSocket(socketUrl);
      this.websocket.onopen=function (e){
        console.log(e)
        console.log("连接成功");
      }
      this.websocket.onclose=function (e){
        console.log(e);
        console.log("连接关闭");
      }
      this.websocket.onmessage=function (e){
        console.log(e.data);
        self.messageList.push(JSON.parse(e.data));
      }
    },
    created() {
      this.start();
      this.selectMessage();
      this.findDriver();
      this.findPassenger();
    },
    methods : {
      closeShow(e){
        this.message=e;
        this.show=false;
        this.sendMessage();
      },
      goBack() {
        this.$router.go(-1);
      },
      sendMessage(){
        if (this.message.trim() === '') {
          // 如果输入内容仅为空格或为空，给出提示并不发送
          Toast('消息不能为空');
          return;
        }
        this.chatMessage.toUserPicture=this.driver.driverImgurl;
        this.chatMessage.fromUserPicture=this.passenger.fareImg;
        this.chatMessage.message=this.message;
        this.chatMessage.toUserId='driver,'+this.driverId;
        this.chatMessage.fromUserId='passenger,1'
        this.websocket.send(JSON.stringify(this.chatMessage));
        this.message="";
      },
      //查询司机的信息
      findDriver(){
        axios.post("http://localhost:8081/wait/wait/selectDriverById",this.driverById).then(res=>{
          this.driver=res.data.data;
        })
      },
      findPassenger(){
        axios.post("http://localhost:8081/wait/chat/findPassenger",this.userPassenger).then(res=>{
          this.passenger=res.data.data;
        })
      },
      selectMessage(){
        axios.post("http://localhost:8081/wait/chat/selectMessage",this.chatMessage).then(res=>{
          this.messageList=res.data.data;
        })
      },
      start(){
        this.userId=localStorage.getItem("userId");
        this.driverId=this.$route.query.driverId;
        this.driverById.id=this.driverId;
        this.chatMessage.fromUserId='driver,'+this.driverId;
        this.chatMessage.toUserId='passenger,'+this.userId;
      }
    },
  };
</script>

<style>
#app{
  background-color: #f5f5f5; /* 示例背景色 */
  .text{
    width: 100%;
    height: 20%;
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
  }
  .fixed-bottom-box{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  }
}
</style>